'use client'

import { Button } from "@/components/ui/button"
import { ChevronLeft } from "lucide-react"
import { useRouter } from "next/navigation"

interface BackButtonProps {
  href?: string // 如果提供，则导航到指定路径
  onClick?: () => void // 如果提供，则执行自定义点击事件
  variant?: "default" | "outline" | "ghost" | "link" | "destructive" | "secondary"
  size?: "default" | "sm" | "lg" | "icon"
  className?: string
  children?: React.ReactNode
  showIcon?: boolean // 是否显示返回图标
  disabled?: boolean // 是否禁用按钮
}

export function BackButton({
  href,
  onClick,
  variant = "outline",
  size = "sm",
  className = "",
  children = "返回",
  showIcon = true,
  disabled = false
}: BackButtonProps) {
  const router = useRouter()

  const handleClick = () => {
    if (onClick) {
      onClick()
    } else if (href) {
      router.push(href)
    } else {
      router.back()
    }
  }

  return (
    <Button
      variant={variant}
      size={size}
      onClick={handleClick}
      disabled={disabled}
      className={`flex items-center gap-2 ${className}`}
    >
      {showIcon && <ChevronLeft className="w-4 h-4" />}
      {children}
    </Button>
  )
} 